import { Component } from 'react'
import { Link } from 'react-router-dom';
//引入less文件
import "../assent/less/items.css"
//引入axios
import { getcate, getgoods } from "../request/app.js";

class Items extends Component {
    constructor() {
        super()
        this.state = {
            //侧边栏的数组
            getcate: [],
            getgoods: [],
            ctmd: [],
            active: 0,
        }
    }
    componentDidMount() {
        //侧边栏
        getcate().then(res => {
            // console.log(res);
            this.setState({
                getcate: res.list
            })
        })
        //商品
        getgoods({
            fid: 1
        }).then(res => {
            // console.log(res);
            this.setState({
                getgoods: res.list
            })
        })
    }
    //点击左边侧边栏
    md(id, index) {
        // getgoods().then(res => {
        //     this.setState({
        //         ctmd:res.list[id]
        //     })
        // })

        getgoods({
            fid: id
        }).then(res => {
            // console.log(res);
            this.setState({
                getgoods: res.list,
                ctmd: res.list[id]
            })
        })
        this.setState({
            active: index
        })
    }

    render() {
        return (
            <div className='ctmd clearfix'>
                {/* 头部 */}
                <header >
                    <div className='top'>
                        <h2>商品分类</h2>

                    </div>
                    <div className='btm'>
                        <input type="text" placeholder='请输入搜索内容' />
                    </div>

                </header>
                {/* 左边侧边栏 */}
                <div className="left">
                    <ul>
                        {
                            this.state.getcate.map((item, index) => {
                                return <li key={item.id} onClick={this.md.bind(this, item.id, index)} className={index == this.state.active ? "active" : ""}>{item.catename}</li>
                            })
                        }

                    </ul>
                </div>
                {/* 右边的分类列表 */}
                <div className="right">
                    <ul>
                        {/* <li className='clearfix'>
                            <img src="https://img.alicdn.com/bao/uploaded/i2/1689522943/O1CN01R2TiRb1XbwNY6MVRj_!!0-item_pic.jpg_468x468q75.jpg_.webp" alt="" />
                            <div> 物生物水杯女生夏季学生高颜值便携简约随行可爱tritan杯子塑料</div>
                            <b>$999</b>
                            <s>$1999</s>
                            <p>999人已经付款，99%的好评</p>
                            <button>加入购物车</button>
                        </li> */}
                        {
                            this.state.getgoods.map(item => {
                                return (
                                    <Link
                                        key={item.id}
                                        to='/detail'
                                     
                                        state= {
                                           {id:item.id}//这是郭伟传的id 请王琦在商品详情接一下参数
                                            }  
                                        >
                                        <li className='clearfix' key={item.id}>
                                            <img src={item.img} alt="" />
                                            <div>{item.goodsname}</div>
                                            <b>${item.price}</b>
                                            <s>${item.market_price}</s>
                                            <p>{item.description}</p>
                                            <button>查看详情</button>
                                        </li>
                                    </Link>
                                )
                            })

                        }
                    </ul>
                </div>
            </div >
        );

    }
}
export default Items